/*
 * @version: 1.0
 * @author: xul0038@qq.com
 * https://gitee.com/xul/autocompleteX
 */
layui.define([ 'jquery', 'layer' ], function(exports) {
	var $ = layui.jquery, layer = layui.layer,
	// MOD_NAME
	MOD_NAME = 'inputTags',
	// interface
	autocompleteX = {
		config : {
			elem : '',
			width : null,
			data : []
		},
		set : function(options) {
			var that = this;
			that.config = $.extend({}, that.config, options);
			return that;
		},
		on : function(events, callback) {
			// return layui.onevent.call(this, MOD_NAME, events, callback)
		}
	},
	// instance
	thisAutocompleteX = function() {
		var that = this, options = that.config;
		return {
			config : options
		}
	},
	// constructor
	Class = function(options) {
		var that = this;
		that.config = $.extend({}, that.config, autocompleteX.config, options);
		that.render();
	};

	Class.prototype.render = function() {
		var that = this
		, options = that.config
		, data = options.data
		, $elem = $(options.elem)
		, $elemAcx = $elem.parent().parent();
		if ($elem.length == 0) {
			return false;
		}

		// 创建选项
		$elem.wrap('<div class="layui-autocompleteX"><div class="layui-form-select"></div></div>');
		var html = '<dl class="layui-anim layui-anim-upbit">';
		for (var i = 0; i < data.length; i++) {
			html += '<dd>' + data[i] + '</dd>';
		}
		html += '</dl>';
		$elem.after(html);

		if (/^\d+$/.test(options.width)) {
			$elemAcx.css('width', options.width + 'px');
		}
		
		that.events();
	};
	Class.prototype.setSelected = function() {
		var that = this
		, options = that.config
		, data = options.data
		, $elem = $(options.elem)
		, $elemAcx = $elem.parent().parent();
		var items = $elemAcx.find('dd.layui-dd-selected');
		var v = $(items).html();
		$elem.val(v);
	};
	Class.prototype.events = function() {
		var that = this
		, options = that.config
		, data = options.data
		, $elem = $(options.elem)
		, $elemAcx = $elem.parent().parent();
		
		$elem.on('click', function(e) {
			//隐藏其他实例显示的弹层
			$('.layui-autocompleteX').not(options.elem).removeClass('layui-form-selected');
			
			if ($elemAcx.is('.layui-form-selected')) {
				$elemAcx.removeClass('layui-form-selected');
				$(document).off('click', mEvent);
			} else {
				$elemAcx.addClass('layui-form-selected');
				$(document).on('click', mEvent = function(e) {
					if (e.target.id !== options.elem && e.target.className !== 'layui-input') {
						$elemAcx.removeClass('layui-form-selected');
						$(document).off('click', mEvent);
					}
				});
			}
		});
		
		$elem.on('input propertychange', function(e) {
			if ($elemAcx.is('.layui-form-selected')) {
				$elemAcx.removeClass('layui-form-selected');
				$(document).off('click', mEvent);
			}
		});
		
		$elemAcx.on('click', 'dd', function(e) {
			var _dd = $(this);
			_dd.siblings().removeClass('layui-dd-selected');
			_dd.addClass('layui-dd-selected');
			_dd.find('.layui-form-checkbox').addClass('layui-form-checked');
			e.stopPropagation();
			
			that.setSelected();
			
			if ($elemAcx.is('.layui-form-selected')) {
				$elemAcx.removeClass('layui-form-selected');
				$(document).off('click', mEvent);
			}
		});
	};

	// 输出模块
	autocompleteX.render = function(options) {
		var inst = new Class(options);
		return thisAutocompleteX.call(inst);
	};
	exports('autocompleteX', autocompleteX);
});